<template>
  <div class="header">
      <el-row  class="header-nav">
        <el-col :span="8" :xs="16">
          <div  class="logo" @click="goHomeHandleClick">
              <el-icon v-if="!showLogo"><Moon /></el-icon>
              <el-icon v-else><Sunny /></el-icon>
              Finding Carter 
              <span style="font-weight: bolder;font-family: STFangsong;">&nbsp;{{getTimeState()}}</span>
          </div>
          
        </el-col>
        <el-col :span="16"  :xs="0" >
          <div class="right">

            <!-- <el-tabs  v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <template v-for="item in navs">
                <el-tab-pane :label="item.title" :name="item.path" />
              </template>
            </el-tabs> -->
              <div :class="navIdex === index ? 'activeNav right-nav' : 'right-nav' " @click="navHandleClick(index, item.path)" v-for="(item,index) in navs" :key="item.id">{{item.title}}</div>
            <div v-if="!localCache.getCache(LOGIN_TOKEN)" class="login" @click="toLoginHandle">登录</div>
            <div v-else class="login">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <img :src="avatarUrl" alt="">
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="changeInformationClick">修改信息</el-dropdown-item>
                    <el-dropdown-item divided @click="loginOutHandleClick">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <span>欢迎{{nickname}}</span>
            </div>
          </div>
        </el-col>
        <el-col  class="drawer" :span="0" :xs="4">
            <el-button  text style="margin-left: 16px" @click="toDrawer">
              列表
            </el-button>
        </el-col>
      </el-row>  
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { localCache } from '@/utils/cache'
import { LOGIN_TOKEN } from '@/global/constants'
import useLoginStore from '@/store/login/login'
import { storeToRefs } from 'pinia';
import emitter from '@/utils/evenBus';

const loginStore = useLoginStore()
const { avatarUrl, nickname } = storeToRefs(loginStore)

const router = useRouter()


const navs = reactive([
  {id: '0' , title: '首页' , path: '/homePage'},
  {id: '1' , title: '学习日志', path: '/study'},
  {id: '2' , title: '实战项目', path: '/project'},
  {id: '3' , title: '友链', path: '/friends'},
  {id: '4' , title: '个人日志', path: '/stoneLog'},
])

let navIdex = ref<Number>(0)
function navHandleClick (index: number, path: string) {
  // console.log(index,path)
  navIdex.value = index
  router.push(path)
}


const showLogo = ref(true)
function getTimeState(){
    // 获取当前时间
    let timeNow = new Date();
    // 获取当前小时
    let hours = timeNow.getHours();
    // 设置默认文字
    let state= ``;
    // 判断当前时间段
    if (hours >= 0 && hours <= 7) {
        state = `炫夜宵~`;
    } else if (hours > 7 && hours <= 10) {
        state= `炫早饭~`;
        showLogo.value = true
    } else if (hours > 10 && hours <= 14) {
        state= `炫午饭~`;
    } else if (hours > 14 && hours <= 17) {
        state= `睡瞌睡~`;
    } else if (hours > 17 && hours <= 24) {
        state= `炫晚饭~`;
        showLogo.value = false
    }
    return state;
}

function goHomeHandleClick() {
  router.push('/')
}

function toLoginHandle() {
  router.push('/login')
}

function changeInformationClick() {
  router.push('/information')
}

//退出登录
function loginOutHandleClick() {
  localCache.removeCache(LOGIN_TOKEN)
  localCache.removeCache('nickname')
  localCache.removeCache('avatarUrl')
  localCache.removeCache('signature')
  // localCache.removeCache('name')
  localCache.removeCache('link')
  router.push('/login')
}


const drawer = ref<boolean>(false)

const toDrawer= () => {
  drawer.value = true
  emitter.emit("event", drawer.value);
}

</script>

<style scoped lang="less">

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #727185e0;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs {
  display: flex;
  align-items: flex-end;
  
}
.header-nav {
  margin: auto 0;
  display: flex;
  padding: 5px 0;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: auto;
  .logo {
    font-family: Microsoft YaHei;
    font-weight: bolder;
    cursor: pointer;
    color: #21bde89f;
    display: flex;
    align-items: center;
  }
  .right {
    font-family: Microsoft JhengHei;
    display: flex;
    flex: 1;
    justify-content: flex-end;
    .right-nav {
      height: 39px;
      line-height: 39px;
      margin: 0 10px;
      transition: border-bottom 100ms ease;
      &:hover {
        border-bottom: 2px solid #85e8e9;
        cursor: pointer;
      }
    }
    .login {
      cursor: pointer;
      margin-left: 10px;
      display: flex;
      line-height: 39px;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-bottom: 2px solid rgba(255, 255, 255, 0);
      &:hover {
        color: #a7eaf4;
      }
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      span {
        padding: 0 5px;
      }
      
    }
  }
}


.activeNav {
  border-bottom: 2px solid #85e8e9;
}

</style>
